import React, { Component } from "react";
import { Table, Button, Space, Modal, Form, DatePicker } from "antd";

export default class Machine extends Component {
  columns = [
    {
      title: "开始时间",
      dataIndex: "startTime",
    },
    {
      title: "结束时间",
      dataIndex: "limit",
    },
    {
      title: "矿机名称",
      dataIndex: "machineName",
    },
    {
      title: "矿机容量T",
      dataIndex: "capacity",
    },
    {
      title: "矿机产出",
      dataIndex: "balance",
    },
    {
      title: "当前效率",
      dataIndex: "yield",
    },
    {
      title: "锁仓金额",
      dataIndex: "frzeeMoney",
    },
    {
      title: "状态",
      dataIndex: "isFreeze",
      render: (e) => (e ? "冻结" : "正常"),
    },
    {
      title: "操作",
      dataIndex: "",
      render: (e) => (
        <Space>
          <Button
            size="small"
            type="primary"
            onClick={() => {
              this.changeClick(e);
            }}
          >
            修改起止时间
          </Button>
          <Button
            size="small"
            type="primary"
            onClick={() => {
              this.freezeClick(e);
            }}
          >
            {e.isFreeze ? "解除" : "冻结"}
          </Button>
        </Space>
      ),
    },
  ];
  state = {
    multiData: [],
    selectedItem: null,
    showModal: false,
    showChange: false,
    showEditModal: false,
  };
  returnBack = () => {
    this.props.history.replace("/user");
  };

  freezeClick = (e) => {
    this.setState({
      showModal: true,
      selectedItem: e,
    });
  };

  changeClick = (e) => {
    this.setState({
      showChange: true,
      selectedItem: e,
    });
  };
  handleChange = async (e) => {
    this.setState({
      loading: true,
      showChange: false,
    });
    await this.http(
      "Order_MachineSize",
      {
        ...this.state.selectedItem,

        ...this.state.selectedItem,
        startTime: e.startTime
          ? this.$dayjs(e.startTime).format("YYYY-MM-DDTHH:mm:ss")
          : this.state.selectedItem.startTime,
        limit: e.limit
          ? this.$dayjs(e.limit).format("YYYY-MM-DDTHH:mm:ss")
          : this.state.selectedItem.limit,
      },
      "POST",
      true
    );
    this.setState({
      loading: false,
      selectedItem: null,
    });
    this.getData();
  };
  handleFreeze = async () => {
    this.setState({
      loading: true,

      showModal: false,
    });
    await this.http(
      "Order_MachineSize",
      {
        ...this.state.selectedItem,
        freeze: !this.state.selectedItem.freeze,
      },
      "POST",
      true
    );
    this.setState({
      loading: false,
      selectedItem: null,
    });
    this.getData();
  };
  getData = async () => {
    this.setState({
      loading: true,
    });
    const res = await this.http("Order_MachineSize", {
      userId: this.props.match.params.id,
    });
    this.setState({
      loading: false,
      multiData: res.data.dtos,
    });
  };
  componentDidMount() {
    this.getData();
  }
  render() {
    return (
      <div>
        <Button className="header" onClick={this.returnBack} type="primary">
          返回
        </Button>
        <Modal
          visible={this.state.showChange}
          footer={[null, null]}
          onCancel={() => {
            this.setState({ showChange: false, selectedItem: null });
          }}
        >
          <Form
            // initialValues={this.state.selectedItem}
            name="basic"
            onFinish={this.handleChange}
            onFinishFailed={this.onFinishFailed}
          >
            <Form.Item label="开始时间" name="startTime">
              <DatePicker></DatePicker>
            </Form.Item>
            <Form.Item label="结束时间" name="limit">
              <DatePicker></DatePicker>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                完成
              </Button>
            </Form.Item>
          </Form>
        </Modal>
        <Modal
          visible={this.state.showModal}
          onOk={this.handleFreeze}
          onCancel={() => {
            this.setState({ showModal: false, selectedItem: null });
          }}
        >
          确定冻结吗？
        </Modal>
        <Table
          rowKey={(data) => data.id}
          loading={this.state.loading}
          columns={this.columns}
          dataSource={this.state.multiData}
        />
      </div>
    );
  }
}
